<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			img{
				width: 250px;
				height: 300px;
			}
			.active{
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img  v-bind:src="imgsrc" v-bind:title="imgtitle">
			<img  :src="imgsrc" :title="imgtitle"
			:class = "isActive?'active':''" @click="toggle()">
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					imgsrc:"img/2.jpg",
					imgtitle:"白咲花",
					isActive:false
				},
				methods:{
					toggle:function(){
						this.isActive = !this.isActive
					}
				}
			})
		</script>
	</body>
</html>
